<template>
  <div>
    <div  class="introduction_head">
      <p>自我描述</p>
      <el-divider></el-divider>
    </div>
    <div class="introduction_body">
      <div class="block">
        <el-avatar style="width: 90%" shape="square" :size="200" :src="avatarUrl" fit="cover"></el-avatar>
      </div>
      <p class="introduction_dream">{{userInfo.dream}}</p>
      <ul class="introduction_list">
        <li>
          <p>姓名:<span>{{userInfo.name}}</span></p>

        </li>
        <li>
          <p>网名:<span>{{userInfo.netName}}</span></p>

        </li>
        <li>
          <p>性别:<span>{{userInfo.gender==1?'男':'女'}}</span></p>

        </li>
        <li>
          <p>年龄:<span>{{userInfo.age}}</span></p>

        </li>
        <li>
          <p>生日:<span>{{userInfo.birthday}}</span></p>

        </li>
        <li>
          <p>原产地:<span>{{userInfo.orgin}}</span></p>

        </li>
        <li>
          <p>所在地:<span>{{userInfo.nowPosition}}</span></p>

        </li>
        <li>
          <p>邮箱:<span>{{userInfo.email}}</span></p>

        </li>
        <li>
          <p>扣扣:<span>{{userInfo.qq}}</span></p>

        </li>
        <li>
          <p>微信:<span>{{userInfo.wechat}}</span></p>

        </li>
      </ul>
    </div>
  </div>
</template>

<script>
   import  commonUtils from  '../common/commonUtils'
  export default {
    name: 'introduction',
    data(){
      return  {
        avatarUrl : 'https://gss0.baidu.com/-4o3dSag_xI4khGko9WTAnF6hhy/zhidao/wh%3D600%2C800/sign=78d84d45379b033b2cddf4dc25fe1aeb/8ad4b31c8701a18b2b24420e9d2f07082938fea0.jpg',
        userInfo: ''

      }
    },
    methods:{
       getUserInfo(){
         var _this=this
         this.axios.get('user/getUserInfo').then(function (success) {
              console.log(success.data)  //获取的时返回的数据。
           if (success.data.code == 0) {
             _this.userInfo=success.data.result;
           }else {
             commonUtils.AlertOperationSuccess("博主是个外星人,获取不到数据！")
           }
         }).catch(function (error) {
           commonUtils.AlertErrorMsg("博主是个外星人!!!")
         })
       }
    },
    mounted () {
      this.getUserInfo();

    }
  }
</script>

<style scoped>
  .introduction_head{
    width: 100%;
    height: 35px;
    padding-top: 15px;
  }
  .el-divider{
    margin-top: 0;
    margin-bottom: 10px;

  }
  .introduction_head p{
    margin-left: 5%;
    margin-bottom: 5px;
    /*margin-top: 20px;*/
  }
  /*--------*/
   .introduction_body{
    margin-left: 3%;
  }
  .introduction_body .introduction_dream{
    font-size: 20px;
    color: #FFF;
  }
  /*---------*/
  .introduction_list li{
    list-style: none;
    margin-top: 5px;
    /*display: block;*/
  }
  .introduction_list li p{
    font-size: 18px;

  }

  .introduction_list li span{
    font-size: 16px ;
    margin-left: 5px;
  }



</style>
